

<template>
  表单的 Model<br>
  <hr>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-form :model="person" label-width="120px" style="width: 500px;">
        <el-form-item label="名称">
          <el-input v-model="person.name" />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model="person.age" />
        </el-form-item>
        <el-form-item label="型号">
          <el-select v-model="person.region" placeholder="请选择一个型号">
            <el-option label="大号" value="one" />
            <el-option label="小号" value="two" />
          </el-select>
        </el-form-item>
        <el-form-item label="选择日期">
          <el-col :span="11">
            <el-date-picker
              v-model="person.date1"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
              format="YYYY年MM月DD日"
              value-format="YYYY-MM-DD"
            />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-time-picker
              v-model="person.date2"
              placeholder="选择时间"
              style="width: 100%"
              format="HH:mm:ss"
              value-format="HH:mm:ss"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="选择">
          <el-switch v-model="person.switch" />
        </el-form-item>
        <el-form-item label="多选">
          <el-checkbox-group v-model="person.checks">
            <el-checkbox label="Online activities" name="checks" />
            <el-checkbox label="Promotion activities" name="checks" />
            <el-checkbox label="Offline activities" name="checks" />
            <el-checkbox label="Simple brand exposure" name="checks" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="单选">
          <el-radio-group v-model="person.radio">
            <el-radio label="Sponsor" />
            <el-radio label="Venue" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="说明">
          <el-input v-model="person.resource" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button type="primary" @click="onSubmit2">提交（准备下一条）</el-button>
          <el-button @click="reset" >重置</el-button>
          <el-button @click="person.$reset()" >重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="12">
      表单值：
      <show-object :obj="person" v-if="true"></show-object>
    </el-col>
  </el-row>


</template>

<script lang="ts">
  import { defineComponent, reactive, watch, nextTick  } from 'vue'
  // 显示对象
  import showObject from '../state-log/show-object.vue'

  import { useModel } from '../../../lib/main'

  type Person = {
    name: string,
    age: number,
    region: string,
    date1: string,
    date2: string,
    switch: boolean,
    checks: string[],
    radio: string,
    resource: string
  }

  /**
   * Model 操作
   */
  export default defineComponent({
    name: 'nf-state-base-Model',
    components: {
      showObject
    },
    props: {
   
    },
    setup(props, context) {

      // 使用 Model 
      const person = useModel<Person>(() => {
        return {
          name: 'Model的演示',
          age: 10,
          region: '',
          date1: '',
          date2: '',
          switch: false,
          checks: ['Promotion activities'],
          radio: '',
          resource: ''
        }
      })

      // person.$state = {}


      watch(person.checks, (val) => {
        console.log('watch -- checks', val)

      })
      // 重置
      const reset = () => {
        person.$reset()
      }

      // 加载指定的记录，绑定表单
      const load = () => {
        axios.get('./user.html?id=100').then((res: any) => {
          person.$state =  res.data
        })
      }

      // 提交表单，然后重置表单
      const onSubmit = () => {
        // 模拟提交
        // eslint-disable-next-line no-undef
        axios.post('/user.html', person)
          .then(function (res: any) {
            console.log(res)
            // 重置表单
            person.$reset()
          })
          .catch(function (error: any) {
            console.log(error)
          })
      }

      // 提交表单，然后保留预设值
      const onSubmit2 = () => {
        // 保存需要保留的表单值的副本
        const old = {
          switch: person.switch,
          checks: [...person.checks],
          radio: person.radio
        }

        axios.post('/user.html', person)
          .then(function (res: any) {
            console.log(res)
            // 重置表单
            person.$reset()
            // 设置需要保留的字段值
            person.$patch(old)
          })
          .catch(function (error: any) {
            console.log(error)
          })
      }
       

      return {
        person,
        onSubmit,
        onSubmit2,
        // 基础
        reset
      }
    }
  })
</script>
